<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--头部固定引用-->
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/icon-font.css"/><!--图标-->
    <link rel="stylesheet" href="../../css/share.css"/><!--分享-->
    <link rel="stylesheet" href="../../css/info-list.css"/><!--分享-->
    <title>分享</title>
    <style>
        .share-backgroud-img {
            background: url(../../images/user/share.png) center no-repeat;
            width: 7.5rem;
            background-size: 100% 100%;
            height:14.8rem;
        }

        .share-qr-code {
            height: 3.94rem;
            width: 3.94rem;
            background: white;
            margin: 0rem 1.76rem 0rem 1.78rem;
            padding: 0.1rem;
        }

        .share-qrcode-desc {
            font-size: 0.24rem;
            line-height: 0.34rem;
            color: rgba(255, 255, 255, 0.79);
            text-align: center;
            margin-top: 0.32rem;
        }

        .share-font-color {
            color: #FFFFFF;
        }

        .share-icon-style {
            background: #FFFFFF;
            height: 0.84rem;
            width: 0.84rem;
            padding-left: 0.16rem;
            padding-right: 0.16rem;
            padding-top: 0.04rem;
            align-items: center;
            border-radius: 0.84rem;
        }

        .info-detail-share {
            margin-top:0.26rem ;
            margin-bottom: 1.44rem;
        }

        .share-qrcode-all {
            margin-top: 4rem;
        }
        #qrcode canvas {
            width : 100%;
            height : 100%;
        }

    </style>
</head>
<!--尽量不要在body上添加样式，除了背景色-->
<body>
<div class="flex-column h-100-p">

    <!-- 导航栏&标题栏 -->
    <div class="placeholder-top">
        <!--状态栏-->
        <div class="bg-main status-bar "></div>
        <!--导航栏-->
        <div class="bg-main nav-bar  flex-row justify-content-between c-white align-items-center">
            <div class="left-bar" onclick="clickBack()">
                <span class="iconfont iconfanhui1 fs16"></span>
            </div>
            <div class="center-bar fs16 ff500 line1">分享好友</div>
            <div class="right-bar">
            </div>
        </div>
    </div>

    <!--下方背景-->
    <div class="flex-column flex-1  scoll-y ">
        <div class="flex-column share-backgroud-img">
            <!--布局-->
            <div class="flex-column justify-content-between">
                <!--二维码-->
                <div class="flex-column share-qrcode-all">
                    <!--二维码-->
                    <div class="share-qr-code">
                        <div id="qrcode">

                        </div>
                    </div>
                    <!--分享描述-->
                    <div class="share-qrcode-desc">
                        <div>您可以通过邀请好友扫码或点击第三方入口分享的</div>
                        <div>方式邀请好友下载智管有方APP</div>
                    </div>
                </div>
                <!--分享按钮-->
                <div class="info-detail-share share-font-color flex-column justify-content-center">

                </div>
            </div>
        </div>

    </div>


</div>
</body>
<!--下面四个文件为固定引用，自己根据情况调整路径，不要跟换引入顺序，其他引用添加在后面-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<!--固定引用结束-->
<!--避免一个页面包含过多功能，减少js重绘页面，推荐分功能，分页面-->
<script src="../../js/template.js"></script>
<script src="../../js/icon-font.js"></script><!--用于彩色字体图标-->
<script src="../../js/jquery.qrcode.min.js"></script><!--引入二维码生成工具-->
<script src="../../js/api.js"></script>
<script>
    const shareUrl = 'https://jt2-api.jddglobal.com/gateway/api/jtzx/v2/html/share/download.html'
    //初始化分享按钮
    function initShareButton() {
      $('.info-detail-share').html(Template.share())
    }

    /*固定页面初始化方法，用于替代$(function(){}),param为url参数，Object类型*/
    function initPage(params) {
      //导航栏自适应
      Utils.sbhAdaptive()

      //初始化分享按钮
      initShareButton()

      //给分享按钮追加一个样式
      $('.detail-share-item').addClass('share-icon-style')

      //画二维码
      makeQrCode()

}

    //向指定位置画二维码
    function makeQrCode() {
      //获取APP下载链接
      // Server.download.getUpdateUrl().then(({code, body}) => {
      // })


      //获取用户信息
      const user = window.user
      //如果用户是游客,分享不带userId
      if (user.isGuest){
        jQuery('#qrcode').qrcode({
          render: 'canvas', //也可以替换为table
          text: shareUrl
        // src: '../../images/pdf.png'
        })
      }else {
        jQuery('#qrcode').qrcode({
          render: 'canvas', //也可以替换为table
          text: shareUrl + '?userId=' + user.userId
          // src: '../../images/pdf.png'
        })
      }

}
    //TODO 分享内容,后面可以按需更改
    let pm = {
      title: '还在为如何让投资更科学理性、简单高效而烦恼吗？',
      content:'最近发现一个平台以科技透视风险、以智能洞见先机，让投资变得如此简单，赶快来围观吧！',
      logo:'../../images/user/version-logo.png'
    }
    //页面内分享
    function shareClick(scene) {
      //获取用户信息
      const user = window.user
      let item
      if (user.isGuest) {
        item = {
          title: pm.title,
          content: pm.content,
          url: shareUrl,
          image: pm.logo,
          type: 'url',
          scene: scene
        }
      }else{
        item = {
          title: pm.title,
          content: pm.content,
          url: shareUrl + '?userId=' + user.userId,
          image: pm.logo,
          type: 'url',
          scene: scene
        }
      }
      Utils.goShare(item)
    }


    /*页面所在窗口由后台前台时触发的方法,param为url参数，Object类型*/
    function startPage(params) {

    }
</script>
</html>
